<template>
    <div class="app-container">
      <el-table
        v-loading="loading"
        border
        :data="orderList"
        style="width: 100%"
      >
        <el-table-column
          align="center"
          min-width="100"
          label="编号"
          prop="id"
          width="100"
        />
        <el-table-column
          align="center"
          width="200"
          label="协议标题"
          prop="wordName"
          sortable="custom"
        />
        <el-table-column align="center" label="协议内容"  min-width="100">
          <template slot-scope="scope">
            <div class="content" v-html="scope.row.wordContent">
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
        >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
          >修改</el-button>
        </template>
      </el-table-column>
        <!--<el-table-column align="center" label="是否需垫付" prop="goodsCount" width="100" />-->
      </el-table>
  

      <el-dialog :visible.sync="showWordsDetail" :title="title">

      <el-form ref="formRef" :model="editModel">
        <el-form-item label="协议名称">
          <el-input v-model="editModel.wordName" disabled></el-input>
        </el-form-item>
        <el-form-item label="协议详情">
          <editor v-model="editModel.wordContent" :init="editorInit" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showWordsDetail = false">取 消</el-button>
        <el-button type="primary" @click="onConfirm">确定</el-button>
      </span>
    </el-dialog>
    </div>
  </template>
  <script>
  import {
    listChannel,getTodayData
  } from '@/api/shop/order'
  import {getSysWords,updateSysWords} from '@/api/system/agreement'
  import { yuan } from '@/utils'
  import Editor from '@tinymce/tinymce-vue'
  
  export default {
    name: 'wordsList',
    filters: {
      yuan
    },
    components:{
      Editor
    },
    data() {
      return {
        showWordsDetail:false,
        loading: true,
        title:"",
        // 列表总数
        total: 0,
        queryForm:{},
        // 订单状态数据字典
        orderStatusOptions: [],
        // 角色列表
        orderList: [],
        channels: [],
        editModel:{
          wordName:'',
          wordContent:''
        },
        // 初始化富文本编辑器
      editorInit: {
        language: 'zh_CN',
        height: 500,
        convert_urls: false,
        plugins: [
          'advlist anchor autolink autosave code codesample  directionality emoticons fullscreen hr   importcss insertdatetime  lists media nonbreaking  pagebreak paste preview print save searchreplace spellchecker tabfocus   textpattern visualblocks visualchars wordcount'
        ],
        toolbar: [
          'searchreplace bold italic underline strikethrough alignleft aligncenter alignright outdent indent  blockquote undo redo removeformat subscript superscript code codesample',
          'hr bullist numlist link charmap preview anchor pagebreak insertdatetime media table emoticons forecolor backcolor fullscreen'
        ],
        images_upload_handler: function(blobInfo, success, failure) {
          return window.alert('协议内容禁止上传图片')
          // const formData = new FormData()
          // formData.append('file', blobInfo.blob())
          // fileUpload(formData)
          //   .then((res) => {
          //     success(res.map.url)
          //   })
          //   .catch(() => {
          //     failure('上传失败，请重新上传')
          //   })
        }
      },
      }
    },
    created() {
      this.getList()
      this.getChannel()
    },
    methods: {
      async onConfirm(){
        let params = {
          id:this.editModel.id,
          words:this.editModel.wordContent
        }

        const res = await updateSysWords(params)
        await this.getList()
        this.$set(this.editModel,'wordName','')
        this.$set(this.editModel,'wordContent','')
        this.showWordsDetail = false
        console.log(res)
      },
      getChannel() {
        listChannel().then((response) => {
          this.channels = response.map.data
        })
      },
      handleUpdate(row){
        this.showWordsDetail = true
        this.title = '修改协议'
        this.editModel = row
        // this.$router.push('')
      },
      handleAdd(){
        this.showWordsDetail = true
        this.title = '新增协议'
        // this.$router.push('operation/agreement/edit/1')
      },
      async getList() {
        const {
          map: {
            words
          }
        } = await getSysWords()
        this.orderList = words
        console.log(this.orderList)
        this.loading = false
      },
    }
  }
  </script>
    <style lang="scss" scoped>
    @import '@/styles/mixin.scss';
    
    .more_btn{
      margin-left: 10px;
    }
    .el-input{
      width: 90%;
    }
    .el-dialog__wrapper{
      z-index: 10 !important;
    }
    ::v-deep(.v-modal){
      z-index: 9 !important;
    }
    .v-modal{
      z-index: 9 !important;
    }

    .content{
      @include text-multiple-ellipsis;
    }
    </style>
  